<template>
  <div class="chart" ref="chart" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from "echarts";

const props = defineProps({
  option: {}
})
const chart = ref(null)
// console.log(props)

watch(props, (newVal) => {
  console.log('newVal', newVal)
  if (newVal.option) {
    let myChart = echarts.init(chart.value);
    newVal && myChart.setOption(newVal.option);
  }
})

onMounted(() => {
  if (props.option) {

    let myChart = echarts.init(chart.value);
    props.option && myChart.setOption(props.option);
  }
})

</script>

<style scoped>

</style>